<template>
  <div class="agency-wrapper">
    <div class="agency-wrapper-content">
      <el-row class="agency-info-wrapper" v-loading="loading">
        <div class="preview-wrapper">
          <div class="agency-count">
            <span class="icon"></span>
            <span class="count">{{productDetail.product.number}}人</span>
          </div>
          <!-- <div
          v-show="productDetail.product.start_status == 0 || productDetail.product.start_status == 1"
          class="countdown-box"
        >
          <span>代理即将开始：</span>
          <Countdown
            v-if="countdownFlag"
            :endTime="productDetail.product.open_time"
            :callback="countdownCallback"
            :endText="endText"
          ></Countdown>
          </div>-->
          <pic-preview
            @getData="_getDetail"
            :productDetail="productDetail"
            :images-list="productDetail.product.product_img"
            :countDate="productDetail.product.open_time_left"
          ></pic-preview>
        </div>
        <div class="info-wrapper">
          <div class="name">
            <i class="label-category">{{productDetail.product.product_area}}</i>
            <span
              v-show="productDetail.product.product_name"
              class="product_name"
            >{{productDetail.product.product_name}}</span>
            <span
              v-show="productDetail.product.product_place"
              class="level"
            >/{{productDetail.product.product_place}}</span>

            <div class="release">发布时间：{{productDetail.product.create_time | parseTime}}</div>
          </div>
          <div class="value-wrapper">
            <el-row class="info-p">
              <span class="title">总价值：</span>
              <span>
                ￥
                <span>{{productDetail.product.product_amount}}</span>
              </span>
            </el-row>
            <el-row class="info-p">
              <span class="title">总代理订金：</span>
              <span class="price">
                ￥
                <span class="count">{{productDetail.product.product_amount_deposit}}</span>
              </span>
            </el-row>
            <el-row class="info-p">
              <span class="title">商品单价：</span>
              <span class="margin-span">{{productDetail.product.product_price}}</span>
              <span
                v-show="productDetail.product.product_unit"
              >/{{productDetail.product.product_unit}}</span>

              <span
                v-if="productDetail.product.product_url"
                class="goods-btn"
                @click="toDetails(productDetail.product.product_url)"
              >商品详情</span>
            </el-row>
          </div>
          <el-row class="info-p">
            <span class="title">所在仓库：</span>
            <span class="margin-span">{{productDetail.product.product_warehouse}}</span>
          </el-row>
          <el-row class="info-p">
            <span class="title">库存：</span>
            <span class="margin-span">
              {{productDetail.product.real_stock}}
              <span
                v-show="productDetail.product.product_unit"
              >{{productDetail.product.product_unit}}</span>
            </span>
          </el-row>
          <el-row class="info-p">
            <span class="title">总代理份数：</span>
            <span class="margin-span">{{productDetail.agent.agent_total_copies}}份</span>
            <span
              v-show="productDetail.agent.agent_each_copies_deposit"
            >，每份{{productDetail.agent.agent_each_copies_deposit}}元</span>
          </el-row>
          <el-row class="info-p">
            <span class="title">代理费率：</span>
            <span class="margin-span">{{(productDetail.agent.agent_rate * 100).toFixed(4)}}%</span>
            <img class="info-tips" src="@/assets/tips.png" title="指优选商家按实际代理金额数的一定比例支付给代理商的费用" alt />
          </el-row>
          <el-row class="info-p">
            <span class="title">代理期限：</span>
            <span
              v-if="productDetail.agent.agency_stage_max <= 0 || !productDetail.agent.agency_stage_max"
              class="margin-span"
            >{{productDetail.agent.agent_time}}个月</span>
            <span
              v-else
              class="margin-span"
            >{{productDetail.agent.agent_time+'~'+productDetail.agent.agency_stage_max +'个月'}}</span>
            <img class="info-tips" src="@/assets/tips.png" title="该产品的可代理时长" alt />
          </el-row>
          <!-- <el-row class="info-p">
          <span class="title">起订份数：</span>
          {{productDetail.product.start_copies}}份
          </el-row>-->
          <el-row class="info-p">
            <span class="title">当前进度：</span>
            <el-progress
              :percentage="Number(parseFloat(productDetail.agent.rate * 100).toFixed(2)) || 0"
            ></el-progress>
          </el-row>
          <el-row class="dividing-line"></el-row>
          <el-row class="info-p info-num" v-show="productDetail.product.start_status==2">
            <span class="title title-num">数量</span>
            <el-input-number
              v-model="agencyCount"
              v-if="!loading"
              :min="start_copies"
              :max="parseFloat(productDetail.product.product_surplus)"
              style="width:145px;margin-left:4px"
              onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
            ></el-input-number>
            <span v-if="maxFlag" class="max-btn" @click="maxHandle">最大份数</span>
            <span v-else class="max-btn" @click="minHandle">最小份数</span>
            <!-- <span class="title">剩余份数：</span> -->
            <span>剩余{{productDetail.product.product_surplus}}份</span>
            <span>（{{productDetail.product.start_copies}}份起订）</span>
          </el-row>
          <el-row class="info-p info-settle" v-show="productDetail.product.start_status==2">
            <div class="info-settle-item">
              <span class="yfdj">
                <span class="title">应付订金：</span>
                <span class="margin-span">{{total_deposit}}元</span>
              </span>
              <span class="ygdlf">
                <span class="title">预估代理费：</span>
                <span
                  v-if="productDetail.agent.agency_stage_max <= 0"
                  class="margin-span"
                >{{estimate_agency}}元</span>
                <span v-else>{{ min_estimate_agency + '~' + estimate_agency + '元'}}</span>
              </span>
            </div>
            <div class="info-settle-item">
              <span class="title">当前余额</span>
              <span class="margin-span">{{accountInfo.usable_capital}}元</span>
              <span class="recharge-btn" @click="toRecharge">去充值</span>
            </div>
          </el-row>
          <el-row class="agency-btn-wrapper">
            <el-button
              v-if="productDetail.product.start_status == 2 "
              :type="pay_type"
              class="agency-btn"
              @click="pay"
              :disabled="pay_disabled"
            >马上代理</el-button>
            <el-button
              v-if="productDetail.product.start_status == 0 "
              class="agency-btn disabled-btn"
              disabled
              type="info"
            >代理即将开始</el-button>
            <el-button
              v-else-if="productDetail.product.start_status == 1 "
              class="agency-btn disabled-btn"
              disabled
              type="info"
            >您已预约</el-button>
            <el-button
              v-else-if="productDetail.product.start_status == 3 "
              class="agency-btn disabled-btn"
              disabled
              type="info"
            >代理已满</el-button>
            <el-button
              v-else-if="productDetail.product.start_status == 4 "
              class="agency-btn disabled-btn"
              disabled
              type="info"
            >代理已结束</el-button>
          </el-row>
        </div>

        <div class="store-info-wrapper">
          <store-info :information="productDetail.store"></store-info>
          <!-- <div class="business-img" v-show="productDetail.store.businessImg">
          <img :src="productDetail.store.businessImg" alt="">
          <el-image style="width: 100%; height: 100%" :src="imgSrc" :preview-src-list="srcList">
            <div slot="error" class="image-slot"></div>
          </el-image>
          </div>-->
          <div class="business-btn">
            <div class="left">
              <img src="../../assets/hall/cardIcon.png" alt />
              <span>营业执照</span>
            </div>
            <span class="btn" @click="businessHandle">查看</span>
          </div>
          <el-dialog
            custom-class="img-dialog"
            :visible.sync="imgFlag"
            :lock-scroll="false"
            :fullscreen="true"
          >
            <img :src="productDetail.store.businessImg" alt />
          </el-dialog>
        </div>
      </el-row>
      <el-row class="other-info-wrapper">
        <el-col class="explain-info-wrapper">
          <explain-info
            :detail="productDetail.product.product_detail"
            :goodsId="productDetail.product.product_id"
          ></explain-info>
        </el-col>
      </el-row>
      <!-- <div class="password-wrapper" v-show="productDetail.password.is_password == 1 && !passwordHidden">
      <div class="container">
        <span class="icon"></span>
        <p class="tips">该商品为专属商品，输入专属码才能查看</p>
        <div class="ipt-wrapper">
          <span class="title">请输入专属码</span>

          <input v-model="passwordIpt" type="password" maxlength="6">
        </div>
        <button type="button" class="pwd-btn" @click="_checkPassword">提交</button>
      </div>
      </div>-->
      <el-dialog
        custom-class="dialog-wrap"
        :visible="productDetail.password.is_password == 1 && !passwordHidden"
        :close-on-click-modal="false"
        :lock-scroll="false"
        width="600px"
        :show-close="false"
      >
        <div class="password-wrapper">
          <span class="icon"></span>
          <p class="tips">该商品为专属商品，输入专属码才能查看</p>
          <div class="ipt-wrapper">
            <span class="title">请输入专属码</span>
            <el-input v-model="passwordIpt" type="password" maxlength="6" />
          </div>
          <div class="dialog-btn">
            <el-button type="primary" class="backBtn" @click="backClick">返回</el-button>
            <el-button type="primary" @click="_checkPassword">提交</el-button>
          </div>
        </div>
      </el-dialog>

      <el-dialog
        custom-class="pages-dialog"
        :visible.sync="pagesFlag"
        :close-on-click-modal="false"
        :lock-scroll="false"
        :fullscreen="true"
        :show-close="false"
      >
        <span slot="title" class="pages-dialog-title">云木屋</span>
        <div v-if="pagesType==1" class="pages-wrap">
          <div class="pages-img">
            <img src="@/assets/hall/tipsPage1.png" alt />
          </div>
          <div class="pages-text">
            <h2>正在排队...</h2>
            <p>该商品人气火爆，请耐心排队等待</p>
          </div>
          <div class="pages-btn">
            <el-button @click="backDetails">返回商品详情</el-button>
          </div>
        </div>
        <div v-else-if="pagesType==2" class="pages-wrap">
          <div class="pages-img">
            <img src="@/assets/hall/tipsPage2.png" alt />
          </div>
          <div class="pages-text">
            <h2>机会来啦！</h2>
            <p>运气不错哟，正在前往支付...</p>
          </div>
        </div>
        <div v-else-if="pagesType==3" class="pages-wrap">
          <div class="pages-img">
            <img src="@/assets/hall/tipsPage3.png" alt />
          </div>
          <div class="pages-text">
            <h2>可代理份数不足</h2>
            <p>可代理份数不足，请重新代理</p>
          </div>
          <div class="pages-btn pages-btn-bl">
            <el-button @click="backDetails">重新代理</el-button>
          </div>
        </div>
        <div v-else-if="pagesType==4" class="pages-wrap">
          <div class="pages-img">
            <img src="@/assets/hall/tipsPage4.png" alt />
          </div>
          <div class="pages-text">
            <h2>代理已满</h2>
            <p>该代理商品已满，请选择其他商品代理</p>
          </div>
          <div class="pages-btn pages-btn-bl">
            <el-button @click="backagencyList">查看更多代理</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import PicPreview from "./components/pic-preview";
import StoreInfo from "./components/store-info";
import ExplainInfo from "./components/explain-info";
import Countdown from "./components/count-down";
import {
  getProductDetail,
  checkPassword,
  checkToken,
  preCheckAction,
} from "@/api/agency";
import { getAccount } from "@/api/homepage";
export default {
  name: "agencydetail",
  data() {
    return {
      imgSrc: require("@/assets/hall/label-zy.png"),
      endText: "已开始",
      countdownFlag: false,
      productDetail: {
        product: {},
        agent: {},
        password: {},
        store: {},
      },
      passwordIpt: "",
      passwordHidden: false,
      pwdToken: "",
      agencyCount: 0,
      loading: true,
      dialogTitleFlag: "111",
      pagesFlag: false,
      pagesType: null,
      imgFlag: false,
      accountInfo: {},
      maxFlag: true,
      jhFlag: false,
      repeatCheck: null,
      lxNum: 0,
      reqParams: {
        product_id: "",
      },
      srcList: [],
    };
  },
  created() {
    console.log("商品id", this.$route.params);
    this.reqParams.product_id = this.$route.params.id;
    this._getDetail();
    this._getAccount();
  },
  watch: {
    agencyCount(val) {
      console.log(val);
      if (!val) {
        this.agencyCount = this.productDetail.product.start_copies;
      }
    },
  },
  computed: {
    total_deposit() {
      return (
        this.productDetail.agent.agent_each_copies_deposit * this.agencyCount
      ).toFixed(2);
    },
    estimate_agency() {
      let num =
        this.productDetail.agent.agent_each_copies_deposit *
        this.agencyCount *
        this.productDetail.agent.agent_rate;
      return Math.floor(num * 100) / 100;
    },
    min_estimate_agency() {
      let num =
        (this.productDetail.agent.agent_each_copies_deposit *
          this.agencyCount *
          this.productDetail.agent.agent_rate) /
        this.productDetail.agent.agency_stage_max;
      return (
        (Math.floor(num * 100) / 100) * this.productDetail.agent.agent_time
      );
      // return (
      //   (this.estimate_agency / this.productDetail.agent.agency_stage_max) *
      //   this.productDetail.agent.agent_time
      // ).toFixed(2);
    },
    start_copies() {
      let start = parseFloat(this.productDetail.product.start_copies);
      let surplus = parseFloat(this.productDetail.product.product_surplus);
      let num = start < surplus ? start : surplus;
      return parseFloat(num) || 0;
    },
    pay_type() {
      let type = "primary";
      if (
        this.productDetail.product.start_status == 0 ||
        this.productDetail.product.start_status == 1
      ) {
        type = "info";
      } else if (this.productDetail.product.product_surplus == 0) {
        type = "info";
      }
      return type;
    },
    pay_disabled() {
      let dis = this.productDetail.product.product_surplus == 0;
      if (
        this.productDetail.product.start_status == 0 ||
        this.productDetail.product.start_status == 1
      ) {
        return true;
      } else if (this.productDetail.product.product_surplus == 0) {
        return true;
      }
      return false;
    },
  },
  methods: {
    businessHandle() {
      if (this.productDetail.store.businessImg) {
        this.imgFlag = true;
      } else {
        this.$message.error("暂时无法查看营业执照，请联系客服");
      }
    },
    // 商品详情
    toDetails(url) {
      window.open(url);
    },
    countdownCallback() {
      this._getDetail();
      console.log("重新请求数据");
    },
    toRecharge() {
      this.$router.push({
        name: "homepage",
        params: {
          routerParams: true,
        },
      });
    },
    maxHandle() {
      this.maxFlag = false;
      let totle = Number(this.accountInfo.usable_capital);
      let price = Number(this.productDetail.agent.agent_each_copies_deposit);
      console.log(totle, price);
      this.agencyCount = parseInt(totle / price);
      console.log(this.agencyCount);
      if (
        this.agencyCount > Number(this.productDetail.product.product_surplus)
      ) {
        this.agencyCount = this.productDetail.product.product_surplus;
      }
    },
    minHandle() {
      this.maxFlag = true;
      this.agencyCount = this.productDetail.product.start_copies;
    },
    _getAccount() {
      getAccount().then((res) => {
        this.accountInfo = res.data;
      });
    },
    backClick() {
      this.$router.back(-1);
    },
    _getDetail() {
      this.loading = true;
      getProductDetail(this.reqParams)
        .then((res) => {
          this.productDetail = res.data;
          console.log("商品详情", this.productDetail);
          if (this.productDetail.store.businessImg) {
            this.srcList.push(this.productDetail.store.businessImg);
          }
          if (
            this.productDetail.product.start_status == 0 ||
            this.productDetail.product.start_status == 1
          ) {
            this.countdownFlag = true;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    pay() {
      // console.log("马上代理");
      // 预购买检查接口(有订金)
      console.log("this.agencyCount", this.agencyCount);
      if (!this.agencyCount) {
        this.$message.error("请选择代理数量");
        return false;
      } else if (
        Number(this.total_deposit) > Number(this.accountInfo.usable_capital)
      ) {
        this.$message.error("可用余额不足");
      } else {
        preCheckAction({
          product_id: this.$route.params.id,
          copies: this.agencyCount,
        }).then((res) => {
          // console.log("预购买检查接口", res);
          // res.code = 1;
          if (res.code == 1) {
            if (this.jhFlag) {
              // 成功，显示机会来了
              this.pagesFlag = true;
              this.pagesType = 2;
              setTimeout(() => {
                this.agent();
                this.pagesFlag = false;
                this.jhFlag = false;
              }, 1000);
            } else {
              this.agent();
            }
          } else if (res.code == 20210) {
            // 排队
            this.pagesFlag = true;
            this.pagesType = 1;
            this.jhFlag = true;
            this.lxNum++;
            if (this.lxNum > 60) {
              // this.$message({
              //   message: "排队时间超时，正在前往商品详情页",
              //   type: "warning"
              // });
              // setTimeout(() => {
              //   this.backDetails();
              // }, 1500);
              this.backDetails();
            } else {
              console.log("排队轮循", this.lxNum);
              this.repeatCheck = setTimeout(() => {
                this.pay();
              }, 5000);
            }
          } else if (res.code == 20220) {
            // 可代理份数不足
            this.pagesFlag = true;
            this.pagesType = 3;
          } else if (res.code == 20230) {
            // 代理已满
            this.pagesFlag = true;
            this.pagesType = 4;
          }
        });
      }
      // this.agent();
    },
    // 返回商品详情
    backDetails() {
      this.pagesFlag = false;
      // console.log("this.pagesFlag", this.pagesFlag);
      this.jhFlag = false;
      this.lxNum = 0;
      clearTimeout(this.repeatCheck);
      // clearInterval(this.repeatCheck);
    },
    // 查看更多代理
    backagencyList() {
      this.pagesFlag = false;
      this.$router.push({
        name: "agency",
      });
    },
    agent() {
      if (!this.agencyCount) {
        this.$message.error("请选择代理数量");
        return false;
      } else if (
        Number(this.total_deposit) > Number(this.accountInfo.usable_capital)
      ) {
        this.$message.error("可用余额不足");
      } else {
        if (this.productDetail.password.is_password == 1) {
          checkToken({
            token: this.pwdToken,
          })
            .then((res) => {
              if (res.code == 1) {
                this.$router.push({
                  name: "pay",
                  params: {
                    id: this.$route.params.id,
                    copies: this.agencyCount,
                    token: this.pwdToken,
                  },
                });
              } else {
                this.$message.error("验证失败");
                setTimeout(() => {
                  window.location.reload();
                }, 1000);
              }
            })
            .catch((res) => {
              setTimeout(() => {
                window.location.reload();
              }, 1000);
            });
        } else {
          this.$router.push({
            name: "pay",
            params: {
              id: this.$route.params.id,
              copies: this.agencyCount,
              token: this.pwdToken,
            },
          });
        }
      }
    },
    _checkPassword() {
      checkPassword({
        check_password: this.passwordIpt,
        password: this.productDetail.password.password,
      }).then((res) => {
        this.pwdToken = res.data.token;
        this.passwordHidden = true;
      });
    },
  },
  components: {
    PicPreview,
    StoreInfo,
    ExplainInfo,
    Countdown,
  },
};
</script>
<style lang="scss">
.agency-wrapper {
  .el-progress {
    .el-progress-bar {
      width: 68%;
      .el-progress-bar__outer {
        height: 8px !important;
        background: #e5e5e5;
        margin-left: 4px;
        border-radius: initial;
        .el-progress-bar__inner {
          border-radius: initial;
        }
      }
    }
    .el-progress__text {
      margin-left: 13px;
    }
  }
}
.img-dialog {
  background: rgba(0, 0, 0, 0.5);
  .el-dialog__headerbtn .el-dialog__close {
    color: #ccc;
    font-size: 28px;
    border: 1px solid #fefefe;
    border-radius: 50%;
    padding: 5px;
    position: relative;
    z-index: 999;
    top: 20px;
    right: 20px;
    &:hover {
      // background: #fe6018;
      color: #fe6018;
      border-color: #fe6018;
    }
  }
  .el-dialog__body {
    height: 90%;
    position: relative;
    z-index: 888;
    img {
      width: 45%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
.pages-dialog {
  height: 100%;
  overflow: hidden;
  .el-dialog__header {
    padding: 0;
    padding-left: 70px;
    .pages-dialog-title {
      display: inline-block;
      line-height: 60px;
      font-size: 30px;
      font-weight: bold;
      background-image: linear-gradient(0deg, #ff9303 0%, #fe6018 100%);
      -webkit-background-clip: text;
      color: transparent;
    }
  }
  .el-dialog__body {
    text-align: center;

    .pages-wrap {
      margin-top: 100px;
      .pages-img {
        img {
          width: 540px;
          height: 350px;
        }
      }
      .pages-text {
        margin: 50px 0 30px 0;
        h2 {
          font-size: 22px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: rgba(17, 17, 17, 1);
        }
        p {
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
        }
      }
      .pages-btn {
        .el-button {
          background: #ff6f47;
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
          border: none;
          width: 160px;
          height: 50px;
          &:hover {
            background: #ff7f5b;
          }
        }
        &.pages-btn-bl {
          .el-button {
            background: #333333;
            color: #fff;
            &:hover {
              background: #444444;
            }
          }
        }
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.agency-wrapper {
  width: 100%;
  height: 100%;
  overflow: auto;
  // min-width: 1465px;
  position: relative;
  padding: 20px;
  .agency-wrapper-content {
    min-width: 1460px;
  }
  .agency-info-wrapper {
    background: #fff;
    display: flex;
    padding: 0 20px 0 37px;
    position: relative;

    .store-info-wrapper {
      width: 18%;
      margin-left: 48px;
      .business-btn {
        width: 100%;
        height: 48px;
        line-height: 48px;
        padding: 0 7%;
        border: 1px solid rgba(235, 240, 242, 1);
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        .left {
          height: 100%;
          line-height: 48px;
          color: #333;
          font-size: 16px;
          img {
            vertical-align: middle;
            margin-bottom: 5px;
            width: 20px;
            height: 17px;
            margin-right: 10px;
          }
        }
        .btn {
          font-size: 15px;
          color: #999;
          cursor: pointer;
          &:hover {
            color: #fe6616;
          }
        }
      }
      .business-img {
        width: 100%;
        max-height: 260px;
        margin-top: 30px;
        .el-image {
          // opacity: 0;
        }
      }
    }
    .preview-wrapper {
      padding: 50px 10px;
      position: relative;
      .countdown-box {
        background: rgba(255, 103, 21, 0.75);
        color: #fff;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        position: absolute;
        left: 10px;
        bottom: 251px;
        z-index: 88;
        width: 495px;
        text-align: center;
        .countdown-wrap {
          display: inline-block;
          font-size: 16px;
        }
      }
      .agency-count {
        position: absolute;
        left: 25px;
        top: 65px;
        padding: 0 17px;
        height: 24px;
        line-height: 24px;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.7);
        text-align: center;
        font-size: 12px;
        color: #333;
        z-index: 9;
        .icon {
          display: inline-block;
          width: 10px;
          height: 12px;
          background: url("../../assets/hall/icon-person.png") no-repeat 0 0 /
            100% 100%;
          margin-bottom: -1px;
          margin-right: 6px;
        }
      }
    }
    .info-wrapper {
      margin-left: 25px;
      padding: 50px 0;
      position: relative;
      width: 680px;
      min-width: 600px;
      &::after {
        content: "";
        width: 1px;
        height: 90%;
        background: #ebeff1;
        position: absolute;
        top: 50%;
        right: -20px;
        transform: translateY(-50%);
      }
      .agency-count {
        display: none;
        position: absolute;
        right: 0;
        top: 10px;
        font-size: 14px;
        color: #999;
        .count {
          color: #666;
        }
      }
      .info-p {
        display: flex;
        line-height: 34px;
        padding: 0 10px;
        font-size: 14px;
        color: #333;
        .info-tips {
          width: 14px;
          height: 14px;
          margin: auto 0;
          margin-left: 10px;
        }
        &.info-num {
          margin: 18px 0;
          .title-num {
          }
        }
        &.info-settle {
          flex-direction: column;
          background: #f9f9f9;
          padding-bottom: 10px;
          padding-top: 10px;
          .info-settle-item {
            display: flex;
            &:first-of-type {
              font-size: 18px;
              color: #f94d33;
              .title {
                color: #f94d33;
              }
            }
            &:last-of-type {
              .recharge-btn {
                font-size: 14px;
                color: rgba(32, 131, 241, 1);
                margin-left: auto;
                margin-right: 10px;
                cursor: pointer;
              }
            }
            .yfdj {
              width: 234px;
              .title {
                margin-right: 7px;
              }
            }
            .ygdlf {
              color: #333;

              .title {
                color: #333;
              }
            }
          }
        }
        .title {
          flex: 0 0 100px;
          color: #999;
          text-align: left;
        }
        .margin-span {
          margin-left: 4px;
        }
        .goods-btn {
          margin-left: auto;
          margin-right: 10px;
          cursor: pointer;
          color: #999;
          text-decoration: underline;
        }
        .max-btn {
          color: #2082f1;
          margin: 0 15px 0 10px;
          cursor: pointer;
        }
        .el-progress {
          flex: 1;
          display: flex;
          align-items: center;
        }
      }

      .name {
        display: flex;
        color: #333;
        font-size: 20px;
        font-weight: bold;
        position: relative;
        .product_name {
          height: 22px;
          line-height: 22px;
          vertical-align: top;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .release {
          position: absolute;
          font-size: 14px;
          color: #999;
          top: 50%;
          right: 0;
          transform: translateY(-50%);
          font-weight: 400;
        }
      }

      .value-wrapper {
        background: #fff3ed;
        padding: 5px 0;
        width: 100%;
        margin: 20px 0 10px 0;
        .price {
          color: #fa4e33;
          font-weight: bold;
          .count {
            font-size: 24px;
          }
        }
      }
      .dividing-line {
        width: 100%;
        height: 1px;
        background: #ebf0f2;
        margin: 10px 0;
      }
      .agency-btn-wrapper {
        padding-left: 12px;
        margin-top: 30px;
        display: flex;
        .agency-btn {
          width: 180px;
          height: 48px;
          font-size: 18px;
          font-weight: bold;
          &.disabled-btn {
            margin-top: 30px;
          }
        }
      }
    }
  }
  .other-info-wrapper {
    margin-top: 20px;
  }
  .password-wrapper {
    .icon {
      display: block;
      width: 71px;
      height: 77px;
      background: url("../../assets/hall/icon-lockb.png") no-repeat 0 0 / 100%
        100%;
      margin: 0 auto;
    }
    .tips {
      margin-top: 23px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #343434;
      text-align: center;
    }
    .ipt-wrapper {
      width: 331px;
      margin: 0 auto;
      margin-top: 40px;
      display: flex;
      height: 34px;
      line-height: 34px;
      .title {
        font-size: 16px;
        color: #343434;
      }
      .el-input {
        margin-left: 10px;
        width: 225px;
      }
    }
    .dialog-btn {
      display: flex;
      width: 56%;
      margin: 40px auto;
      justify-content: space-between;
      .el-button {
        display: block;
        width: 140px;
        height: 40px;
        line-height: 40px;
        padding: 0;
        font-size: 16px;
        text-align: center;
        &.backBtn {
          background: #fff;
          color: #ff7f5b;
          border-color: #ff7f5b;
          &:hover {
            background: #fff4f1;
          }
        }
      }
    }
  }
}

// .password-wrapper {
//     position: fixed;
//     width: 100%;
//     height: 100%;
//     background: rgba(0, 0, 0, 0.3);
//     top: 94px;
//     left: 240px;
//     z-index: 99;
//     transition: all 0.3s ease-in-out;
//     .container {
//       background: #fff;
//       width: 520px;
//       height: 320px;
//       padding-top: 35px;
//       border-radius: 8px;
//       box-shadow: 0px 0px 10px 0px rgba(236, 236, 236, 0.5);
//       position: absolute;
//       top: 50%;
//       left: 50%;
//       margin-top: -185px;
//       margin-left: -360px;
//       .icon {
//         display: block;
//         width: 44px;
//         height: 48px;
//         background: url("../../assets/hall/icon-lockb.png") no-repeat 0 0 / 100%
//           100%;
//         margin: 0 auto;
//       }
//       .tips {
//         margin-top: 20px;
//         font-size: 14px;
//         color: #999;
//         text-align: center;
//       }
//       .ipt-wrapper {
//         margin-top: 40px;
//         display: flex;
//         height: 34px;
//         line-height: 34px;
//         padding: 0 90px;
//         .title {
//           font-size: 16px;
//           color: #333;
//         }
//         input {
//           margin-left: 10px;
//           width: 220px;
//         }
//       }
//       .pwd-btn {
//         display: block;
//         width: 140px;
//         height: 45px;
//         line-height: 45px;
//         background: #ff7f5b;
//         border: none;
//         border-radius: 4px;
//         color: #fff;
//         font-size: 16px;
//         text-align: center;
//         margin: 50px auto;
//         cursor: pointer;
//       }
//     }
//   }
</style>

